<template>
<div>
  <el-header style="text-align: right; font-size: 12px">

    <el-breadcrumb separator="/" style=" width: 500px;float: left;height: 60px ;line-height: 60px">
      <el-breadcrumb-item :to="{ path: '/studentInfo' }"><strong style="cursor: pointer">首页</strong></el-breadcrumb-item>

    </el-breadcrumb>
    <el-button @click="insertcon" style="text-align: left;" >新增</el-button>
    <el-dropdown>
      <span style="cursor: pointer">{{$store.state.empName}}<i class="el-icon-arrow-down "  style=" cursor: pointer" ></i></span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item ><span @click="roleBiao">个人信息</span></el-dropdown-item>
        <el-dropdown-item><span @click="loginOut()">退出</span></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

  </el-header>

  <el-main>
    <el-table :data="page.records" border stripe>
      <el-table-column prop="consultantId" label="咨询者编号"></el-table-column>
      <el-table-column prop="consultantName" label="咨询者姓名"></el-table-column>
      <el-table-column prop="sex" label="性别" ></el-table-column>
      <el-table-column prop="brithday" label="出生日期" ></el-table-column>
      <el-table-column prop="phone" label="联系方式"></el-table-column>
      <el-table-column prop="qqNumber" label="QQ号码" ></el-table-column>
      <el-table-column prop="currentSituation" label="微信账号" ></el-table-column>
      <el-table-column prop="enrolEducation" label="目前状况" ></el-table-column>
      <el-table-column prop="parentMoblie" label="教育程度"></el-table-column>
      <el-table-column prop="chooseMajor" label="家长联系方式"></el-table-column>
      <el-table-column prop="address" label="家庭住址"></el-table-column>
      <el-table-column prop="graduateSchool" label="毕业学校"></el-table-column>
      <el-table-column prop="careerPlanner" label="咨询师"></el-table-column>

      <el-table-column prop="isSignup" label="是否报名">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isSignup"
            :active-value="1"
            :inactive-value="0"
            @change="changConsultStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="remakes" label="备注"></el-table-column>
      <el-table-column prop="操作" label="操作">
        <template slot-scope="scope">

          <div style="width: 50px;height: 25px;background-color: aquamarine;border-radius: 5px;text-align: center"><a href="#" @click="updateCon(scope.row)">修改</a></div>
          <div style="width: 50px;height: 25px;background-color: red;border-radius: 5px;text-align: center"><a href="#" @click="deleteCon(scope.row)">删除</a></div>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
  <!--      分页控件-->
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[5, 8, 10, 12]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </div>
  <!--    新增弹窗-->
  <el-dialog
    title="操作咨询信息"
    :visible.sync="insertcon1"
    width="50%"
    style="height:100%"
    :before-close="handleClose">

    <span class="span1">咨询者姓名</span><el-input v-model="consultant.consultantName" placeholder="咨询者姓名" class="input1"></el-input><br>
    <span class="span1">性别:</span><el-input v-model="consultant.sex" placeholder="性别" class="input1"></el-input><br>
    <span  class="span1">出生日期</span><el-input v-model="consultant.brithday" placeholder="出生日期" class="input1"></el-input><br>
    <span  class="span1">联系方式</span><el-input v-model="consultant.phone" placeholder="联系方式" class="input1"></el-input><br>
    <span class="span1">QQ号码</span><el-input v-model="consultant.qqNumber" placeholder="QQ号码" class="input1"></el-input><br>
    <span class="span1">微信账号</span><el-input v-model="consultant.wechatNumber" placeholder="微信账号" class="input1"></el-input><br>
    <span  class="span1">目前状况</span><el-input v-model="consultant.currentSituation" placeholder="目前状况" class="input1"></el-input><br>
    <span  class="span1">教育程度</span><el-input v-model="consultant.enrolEducation" placeholder="教育程度" class="input1"></el-input><br>
    <span class="span1">家长联系方式</span><el-input v-model="consultant.parentMoblie" placeholder="家长联系方式" class="input1"></el-input><br>
    <span class="span1">选择专业</span><el-input v-model="consultant.chooseMajor" placeholder="选择专业" class="input1"></el-input><br>
    <span class="span1">家庭住址</span><el-input v-model="consultant.address" placeholder="家庭住址" class="input1"></el-input><br>
    <span class="span1">毕业学校</span><el-input v-model="consultant.graduateSchool" placeholder="毕业学校" class="input1"></el-input><br>
    <span class="span1">咨询师</span><el-input v-model="consultant.careerPlanner" placeholder="咨询师" class="input1"></el-input><br>
    <span class="span1">是否报名</span><el-input v-model="consultant.isSignup" placeholder="是否报名" class="input1"></el-input><br>
    <span class="span1">备注</span><el-input v-model="consultant.remakes" placeholder="备注" class="input1"></el-input><br><br>
        <el-button type="success" @click="commit">提交</el-button>
        <el-button type="danger" @click="cancel">取消</el-button>

  </el-dialog>

</div>

</template>

<script>
import instance from "../../utils/request";//引入axios实例

export default {
  name: "Consultant",

  data() {
    return {
      page: {//页面对象
        current:1,//当前页码
        size:5,//页面大小
        total:0,//数据总条数
        records:{}//数据
      },
      consultant:{},
      insertcon1:false,
      payment:{}
    }
  },
  methods:{
    commit(){//提交
      //提交到后台
      instance.post("/consultant",this.consultant).then(res=>{
        this.$message("操作成功");
        this.getConsultant();

      });
      this.insertcon1=false;
      this.consultant = {};

    },
    handleSizeChange(val) {//分页控件 改变页面大小时执行
      this.page.size = val;
      instance.get("/consultant/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
      });
    },
    handleCurrentChange(val) {//分页控件 改变当前页码时执行
      this.page.current = val;
      instance.get("/consultant/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page.records = res.data.records;
      });
    },
    cancel(){//取消
      this.insertcon1=false;
      this.getConsultant();
      // this.$router.push({name:"Index"});//切换到主页
    },
    insertcon(){
      this.consultant = {};
      this.insertcon1= true;
    },
    roleBiao(){
      this.$router.push({name:'Role'})//跳转到角色
    },
    handleClose(done) {//X关闭对话框
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    updateCon(row){//修改
      this.consultant.consultantId=row.consultantId;
      instance.get("/consultant/"+row.consultantId).then(res=>{
        this.consultant = res.data;
        this.getConsultant();
      });
      this.insertcon1 = true;
    },
    deleteCon(row) {//删除班级
      instance.delete("/consultant/"+row.consultantId).then(res=>{
        if (res.data>0){
          this.$message("删除就业信息成功!");
          this.getConsultant();
          // this.$router.push({name:'Role'})
          // this.$router.push({name:'Classes'});//路由跳转
        }else {
          this.$message("删除就业信息失败!");
        }
      });
      this.getConsultant();//重新加载班级信息
    },
    getConsultant(){
      //获取所有班级信息分页形式
      instance.get("/consultant/page/"+this.page.current+"/"+this.page.size).then(res=>{
        this.page = res.data;//查询数据并赋值
      });

    },
    loginOut(){//退出登录
      instance.get("/user/logout");
      location.reload();
    },
    /**
     * 设为已报名
     */
     async changConsultStatus(row) {
      let sta = 1;
      if(row.isSignup){
        sta = 0;
      }else{
        sta=1;
      }
      if (sta){
        this.consultant.consultantId=row.consultantId;
        await instance.get("/consultant/"+row.consultantId).then(res=>{
          this.consultant = res.data;
          this.commit();
        });
        this.payment.studentId = row.consultantId;
        this.payment.pmTypeId = 3;
        await instance.post("/payment", this.payment);
      }
      this.$message(row.consultantName+row.isSignup);
    }
  },
  created() {//使用该组件时执行
    this.getConsultant();
    if (this.$store.state.roleId == 0){
      this.$message('请先登录');
      this.$router.push({name:'Login'});
    }
  }


}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}
a {
  color: #42b983;
}
.el-dropdown {
  vertical-align: top;
}
.input1{
  width: 500px;

}
.span1{
  float: left;
  clear: both;
  margin-top: 10px;
  margin-left: 50px;
  width: 90px;
  /*background-color: #2c3e50;*/
}
</style>
